<template>
	<view class="content">
		<view class="homeCard">
			<image :src="homeData.cardUrl" mode="scaleToFill" @click="previewImage(homeData.cardUrl)" />
		</view>

		<view class="cu-list grid col-5 no-border margin-top" style="border-radius: 20rpx; padding-bottom: 0;">
			<view class="cu-item" @click="call(homeData.phone)">
				<view class="homeMenuItem">
					<image src="../../static/home/ddh.png" mode="scaleToFill" />
					<text>打电话</text>
				</view>
			</view>
			<view class="cu-item" @click="addPhoneContact">
				<view class="homeMenuItem">
					<image src="../../static/home/jtxl.png" mode="scaleToFill" />
					<text>加通讯录</text>
				</view>
			</view>
			<view class="cu-item" @click="navigateToLocation">
				<view class="homeMenuItem">
					<image src="../../static/home/bf.png" mode="scaleToFill" />
					<text>去拜访</text>
				</view>
			</view>
			<view class="cu-item" @click="previewImage(homeData.cardUrl)">
				<view class="homeMenuItem">
					<image src="../../static/home/jwx.png" mode="scaleToFill" />
					<text>加微信</text>
				</view>
			</view>
			<view class="cu-item" @click="previewImage(homeData.cardUrl)">
				<view class="homeMenuItem">
					<image src="../../static/home/zzmp.png" mode="scaleToFill" />
					<text>纸质名片</text>
				</view>
			</view> 
		</view>


		<view class="cu-bar bg-white solid-bottom margin-top" style="border-radius: 20rpx 20rpx 0 0;">
			<view class="action text-bold">
				<text class="cuIcon-title text-29a1b1"></text>
				<text class="text-xl">公司简介</text>
			</view>
			<view class="action text-bold" style="font-size: 24rpx;" @click="goToAbout">
				<text>更多</text>
				<text class="cuIcon-right" style="font-size: 24rpx;"></text>
			</view>
		</view>
		<view class="padding-sm" style="background-color: #ffffff; border-radius: 0 0 20rpx 20rpx;">
			<view class="text-xl">{{homeData.companyName}}</view>
			<view class="margin-top-sm">
				{{homeData.companyIntroduction}}
			</view>
		</view>


		<swiper class="card-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500"
			@change="cardSwiper" indicator-color="#8799a3" indicator-active-color="#29a1b1">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur == index ? 'cur' : ''">
				<view class="swiper-item" @click="previewImage(item.rotationUrl)">
					<image :src="item.rotationUrl" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>


		<view class="cu-bar bg-white solid-bottom" style="border-radius: 20rpx 20rpx 0 0;">
			<view class="action text-bold">
				<text class="cuIcon-title text-29a1b1"></text>
				<text class="text-xl">产品列表</text>
			</view>
			<view class="action text-bold" style="font-size: 24rpx;" @click="goToProduct">
				<text>更多</text>
				<text class="cuIcon-right" style="font-size: 24rpx;"></text>
			</view>
		</view>
		<view class="cu-list grid col-2" style="border-radius: 0 0 20rpx 20rpx; padding-bottom: 0;">
			<view class="cu-item" v-for="(item,index) in productList" :key="index">
				<view class="cpViewItem" @click="goToInfo(item, index)">
					<image :src="item.proImg" mode="scaleToFill" />
					<text>{{item.proName}}</text>
				</view>
			</view>
		</view>
		<view v-if="productList.length === 0" class="text-center padding-top padding-bottom bg-white">
			暂无数据
		</view>

		<block v-if="journaLismList.length !== 0">
			<view class="cu-bar bg-white solid-bottom margin-top" style="border-radius: 20rpx 20rpx 0 0;">
				<view class="action text-bold">
					<text class="cuIcon-title text-29a1b1"></text>
					<text class="text-xl">新闻咨询</text>
				</view>
				<view class="action text-bold" style="font-size: 24rpx;">
					<text>更多</text>
					<text class="cuIcon-right" style="font-size: 24rpx;"></text>
				</view>
			</view>
			<view style="background-color: #ffffff; border-radius: 0 0 20rpx 20rpx; overflow: hidden;">
				<view class="cu-list menu sm-border">
					<view class="cu-item arrow" style="padding: 0 10rpx;" v-for="(item,index) in 5" :key="index">
						<view class="content">
							<view>
								<text class="cuIcon-commentfill text-29a1b1 margin-right-xs"></text>
								<view class="text-ellipsis">多行Item多行Item多行行Item多行Item多行行Item多行Item多行Item多行Item多行Item</view>
							</view>
							<view class="text-gray text-sm">
								<text class="cuIcon-time margin-right-xs"></text> 2023-11-27 17:02:39
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>

		<block>
			<view class="cu-bar bg-white solid-bottom margin-top" style="border-radius: 20rpx 20rpx 0 0;">
				<view class="action text-bold">
					<text class="cuIcon-title text-29a1b1"></text>
					<text class="text-xl">爱世家视频</text>
				</view>
				<!-- <view class="action text-bold" style="font-size: 24rpx;">
					<text>更多</text>
					<text class="cuIcon-right" style="font-size: 24rpx;"></text>
				</view> -->
			</view>
			<view style="background-color: #ffffff; border-radius: 0 0 20rpx 20rpx; overflow: hidden;">
				<video style="width: 100%;" src="https://www.aizyiot.cn/home/file/base/183.mp4"></video>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 名片ID
				id: "1",

				// 首页数据
				homeData: {},

				cardCur: 0,
				swiperList: [],

				// 产品列表
				productList: [],

				// 新闻资讯
				journaLismList: []
			}
		},
		onLoad(option) {
			const vm = this;

			// 获取产品列表 （随机前四中产品）
			vm.getProductList();
		},
		onShow() {
			const vm = this;

			// 获取ID
			vm.id = global.cardItemId ? global.cardItemId : '1';
			
			// 获取首页信息
			vm.getHomeData();

			// 获取轮播图数据
			vm.getSwiperList();

		},
		methods: {
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},

			// 获取首页数据
			getHomeData() {
				const vm = this;
				var data = {
					"id": vm.id,
				}
				vm.$api.getHomeData(data).then(res => {
					console.log(res)

					vm.homeData = res;

					// 存储全局变量
					uni.setStorageSync("homeData", res)
				})
			},


			// 获取首页轮播图数据
			getSwiperList() {
				const vm = this;
				vm.$api.getSwiperList().then(res => {
					console.log(res);

					vm.swiperList = res;
				})
			},

			// 获取新闻咨询信息
			getJournalismList() {
				const vm = this;
				vm.$api.getJournalismList().then(res => {
					console.log(res);

					vm.journaLismList = res;
				})
			},

			// 获取产品列表
			getProductList() {
				const vm = this;
				vm.$api.getProductList().then(res => {
					console.log('产品列表：：：：：：：', res)
					vm.productList = res;


					// 获取打乱后的前四个元素作为随机截图
					const shuffledScreenshots = vm.productList.sort(() => Math.random() - 0.5);
					vm.productList = shuffledScreenshots.slice(0, 4);
				})
			},


			// 查看详情
			goToInfo(item, index) {
				const vm = this;

				uni.navigateTo({
					url: "/pages/info/index" + `?id=${item.id}`
				})

			},


			// 添加通讯录
			addPhoneContact() {
				const vm = this;

				uni.addPhoneContact({
					firstName: 'John', // 名字
					mobilePhoneNumber: vm.homeData.phone, // 手机号码
					success(res) {
						console.log('添加联系人成功', res);
						setTimeout(function() {
							vm.$utils.Toast('添加联系人成功');
						}, 1000)
					},
					fail(err) {
						console.error('添加联系人失败', err);
						// 如果添加失败，引导用户打开通讯录权限
						uni.showModal({
							title: '提示',
							content: '通讯录权限未开启，是否去设置中开启？',
							success(res) {
								if (res.confirm) {
									// 用户点击确认，打开设置界面
									uni.openSetting({
										success(settingRes) {
											console.log('打开设置界面成功', settingRes);
										},
										fail(settingErr) {
											console.error('打开设置界面失败', settingErr);
										}
									});
								}
							}
						});
					}
				});
			},

			// 加微信
			addFriend() {
				console.log('无法直接添加')
			},

			// 跳转至产品列表
			goToProduct() {
				const vm = this;
				uni.switchTab({
					url: "/pages/product/index"
				})
			},

			// 跳转公司介绍
			goToAbout() {
				const vm = this;
				uni.switchTab({
					url: "/pages/about/index"
				})
			},


			navigateToLocation() {
				const vm = this;

				// const latitude = vm.homeData.latitude; // 替换为实际的纬度
				// const longitude = vm.homeData.longitude; // 替换为实际的经度
				// const name = vm.homeData.address; // 目标位置
				var data = {
					latitude: parseFloat(vm.homeData.latitude),
					longitude: parseFloat(vm.homeData.longitude),
					name: vm.homeData.address,
				}

				console.log(data)
				uni.openLocation({
					latitude: data.latitude, // 纬度
					longitude: data.longitude, // 经度
					name: data.name,
					scale: 18, // 缩放级别，范围5-18，默认为18
					success: (res) => {
						console.log(res)
					},
					fail: (res) => {
						console.log('失败', res)
					}
				});
			}



		}
	}
</script>

<style lang="less">
	.homeCard {
		width: 100%;
		height: 450rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 0 10px #d5d5d5;

		image {
			width: 100%;
			height: 100%;
		}
	}


	.homeMenuItem {
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 70rpx;
			height: 70rpx;
		}

		text {
			color: black !important;
		}
	}


	.cpViewItem {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;

		image {
			width: 400rpx;
			height: 400rpx;
		}

		text {
			// color: black !important;
		}
	}
</style>